<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.min.css" integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js" integrity="sha512-EKrFvch3qTzLFQgjbcjpsRmF8T3UCtc9ojtMAu6dvvP+bV8qYUDOaQ84nwYCkSLT7lbqGoya/Kf+8fyCBE0vRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="src/mz.form.js"></script>
    </head>
    <body>

        <div id="msg"></div>
        <br><br>


        <div style=" margin: 10px auto;">
            <form name="data_form" class="layui-form layui-form-pane">
			
            </form>
        </div>


        <script>
            function log(msg){
                layui.$("#msg").text(msg);
            }

            var mzForm = new MZForm({
                frm: document.data_form,
                elements: [
                    {type: 'text', name: 'name', title: '姓名'},
                    {type: 'file', name: 'name', title: '头像', inline:true},
                    {type: 'radio', name: 'sex', title: '性别', inline:true, options:[{text:'男', value:'1'},{text:'女', value:'0'}]},
                    {type: 'select', name: 'type', title: '类型', inline:true, options:[{text:'简单', value:'1'},{text:'一般', value:'0'}]},
                    {type: 'checkbox', name: 'fun', title: '功能', options:[{text:'a', value:'a'},{text:'b', value:'b'}]},
                    {type: 'html', name: '自定义1', content: '<p style="color:red">自定义内容</p>'},
                    {type: 'html', name: '自定义2', render: renderPlugin},
                    {type: 'buttons', name: 'submit'},
                ]
            });

            function renderPlugin(){
                return '<p style="color:wheat">自定义渲染第三方插件</p>';
            }

            mzForm.bind('submit', function(data){
                log(JSON.stringify(data))
            })
        </script>

    </body>
</html>